<script type="text/x-template" id="data-manager-manage-category-input">
    <div class="cly-vue-data-manager__mci bg-white">
        <div class="cly-vue-data-manager__mci--block bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center bu-px-4"
            v-if="!editing">
            <div class="text-medium" v-html="category.name"></div>
            <div class="bu-is-flex">
                <div @click="removeCategory" class="bu-mr-3"><i class="el-icon-delete color-cool-gray-50 bu-is-clickable"></i></div>
                <div @click="editCategory"><i class="el-icon-edit color-cool-gray-50 bu-is-clickable"></i></div>
            </div>
        </div>
        <div class="cly-vue-data-manager__mci--block bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center bu-px-4"
            v-if="editing">
            <el-input class="bu-mr-3" v-model="categoryName">
            </el-input>
            <div class="bu-is-flex">
                <el-button
                    size="small"
                    @click="saveCategory">
                    {{ i18n('common.done') }}
                </el-button>
                <el-button
                    size="small"
                    @click="cancelEdit">
                    {{ i18n('common.cancel') }}
                </el-button>
            </div>
        </div>
    </div>
</script>

<script type="text/x-template" id="data-manager-manage-category">
    <div style="height: 420px; overflow: auto">
        <div class="text-big font-weight-bold bu-my-4">{{ i18n('data-manager.add-category') }}</div>
        <div class="bu-mb-5">
            <div class="text-small font-weight-bold bu-mb-1">{{ i18n('data-manager.category-name') }}</div>
            <div class="bu-is-flex bu-is-justify-content-space-between bu-is-align-items-center bu-mb-3">
                <el-input
                    v-model="newCategoryName">
                </el-input>
                <el-button
                    class="text-smallish font-weight-bold color-blue-100"
                    size="small bu-mx-3"
                    type="text"
                    :disabled="!newCategoryAllowed"
                    @click="addNewCategory">
                    {{ i18n('data-manager.add-category') }}
                </el-button>
            </div>
        </div>
	    <div v-if="categories.length" class="bu-mb-4">
            <div class="text-big font-weight-bold bu-mb-1 bu-pt-2">{{ i18n('data-manager.manage-categories') }}</div>
	    	<data-manager-manage-category-input
                ref="categoryInput"
                v-for="(category, i) in categories"
                @remove-me="removeCategoryAtIndex(i)"
	    		:removable="categories.length > 1"
	    		:key="i"
	    		:segment-index="i"
	    		:max-categories="maxCategories"
	    		v-model="categories[i]">
	    	</data-manager-manage-category-input>
	    </div>
    </div>
 </script>